<template>
    <div>
		<headerSearch :title="headerTitle" :searchBack="true"></headerSearch>
        <div class="pagecontent">
            <!-- 头部浮层 -->
            <div class="main-suspension main-user-wallet"> 
                <div class="suspension-top"></div>
                <div class="suspension-info user-wallet-info">
                    <!-- 卡片头部-上 -->
                    <div class="user-wallet-top">
                        <P>余额</P>
                        <strong>2816.00</strong>
                    </div>
                    <!-- 卡片头部-下 -->
                    <div class="user-wallet-bottom">
                        <ul>
                            <li>
                                <router-link to="">
                                    充值
                                </router-link>
                            </li>
                            <li>
                                <router-link to="">
                                    提现
                                </router-link>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <!-- 我的订单 -->
            <div class="main-user-order">
                <div class="title_text_more">
                <h3>我的订单</h3>
                <router-link to="/userCompany">更多<i class="iconfont icon-xiangyou"></i></router-link>
                </div>
                <div class="coterie">
                    <ul>
                    <li v-for="(coter, i) in coters" :key="i">
                        <router-link to="">
                            <i :class="coter.icon"></i>
                            <span>{{coter.c_name}}</span>
                        </router-link>
                    </li>
                    </ul>
                </div>  
            </div>
            <!-- 猜你喜欢 -->
            <div class="industry_product rush_to_purchase">
                <div class="purchase_title title_text_more">
                <h3><span>猜你喜欢</span></h3>
                </div>
                <div class="purchase">
                <ul class="purchase_list clear">
                    <li v-for="(pur, p) in purlist" :key="p">
                    <router-link to="">
                        <img src="../common/images/cindex_37.jpg">
                        <span>{{pur.pur_name}}</span>
                        <span class="pur_scare">
                        <strong><sub>￥</sub>{{pur.money}}</strong>
                        </span>
                    </router-link>
                    </li>
                </ul>
                </div>
            </div>
        </div>
        <so-footer></so-footer>
    </div>
</template>

<script>
import headerSearch from '../public/header-search.vue';
import soFooter from '../components/footer-bar';
    export default {
        name: 'userWallet',
        data() {
            return {
                headerTitle: '我的钱包',
                coters: [
                    { 
                        icon: 'iconfont icon-daifukuan',
                        c_name: '待付款'
                    },
                    { 
                        icon: 'iconfont icon-daifahuo',
                        c_name: '待发货'
                    },
                    { 
                        icon: 'iconfont icon-daipingjia',
                        c_name: '待评价'
                    },
                    { 
                        icon: 'iconfont icon-daishouhuo',
                        c_name: '待收货'
                    },
                    { 
                        icon: 'iconfont icon-daifukuan',
                        c_name: '退款/售后'
                    },
                ],
                purlist: [
                    { 
                        pur_name: '钻石清洁电动牙刷',
                        money: '98',
                        pur_num: '1989'
                    },
                    { 
                        pur_name: '钻石清洁电动牙刷',
                        money: '98',
                        pur_num: '1989'
                    },
                    { 
                        pur_name: '钻石清洁电动牙刷',
                        money: '98',
                        pur_num: '1989'
                    },
                    { 
                        pur_name: '钻石清洁电动牙刷',
                        money: '98',
                        pur_num: '1989'
                    }
                ],
            }
        },
        components: {
            headerSearch,
            soFooter
        }
    }
</script>

<style>
@import '../common/css/userCenter.css';

/* 头部浮层 */
.main-user-wallet {
    height: 2.84rem !important;
    margin-bottom: 0.2rem;
}
.user-wallet-info {
    height: auto !important;
}
/* 头部浮层--上 */
.main-user-wallet  .user-wallet-top {
    height: 1.7rem;
    text-align: center;
    margin: 0;
}
.main-user-wallet .user-wallet-top p{
    font-size: 0.22rem;
    color: #333;
    width: 7.1rem;
    text-align: center;
    padding-top: 0.34rem;
    box-sizing: border-box;
}
.main-user-wallet .user-wallet-top strong{
    font-size: 0.48rem;
    color: #333;
    display: block;
}

/* 头部浮层--下 */
.user-wallet-bottom {
    border-top: 1px solid #eee;
}
.user-wallet-bottom ul {
    display: flex;
    justify-content: space-between;
    padding: 0.36rem 0;
}
.user-wallet-bottom ul>li {
    flex: 1;
    text-align: center;
    line-height: 0.4rem;
    font-size: 0.24rem;
    color: #e50838;
    border-right: 1px solid #eee;
}
.user-wallet-bottom ul>li:last-child {
    border-right: none;
    color: #999;
}

/* 我的订单 */
.main-user-order {
    background-color: #fff;
}
.main-user-order .coterie {
    padding: 0.2rem;
}
.main-user-order .coterie ul li {
    line-height: 0.48rem;
}
.main-user-order .coterie i {
    font-size: 0.48rem;
    display: block;
}

/***猜你喜欢****/
.rush_to_purchase {
    padding-bottom: 0;
    margin-bottom: 0;
    margin-top: 0.2rem;
} 

</style>